<template>
  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>新增属性</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-form-model-item
        label="所属分类"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="categoryId"
      >
        <category-select ref="CategorySelect" @selectedCategory="getCategoryData" :categoryId="this.form.categoryId"/>
      </a-form-model-item>
      <a-form-model-item
        label="属性名称"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="attrName"
      >
        <a-input placeholder="请填写属性名称" v-model="form.attrName" />
      </a-form-model-item>
      <a-form-model-item
        label="属性值"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="attrValues"
      >
        <a-select mode="tags" style="width: 100%" :token-separators="[',']" @change="handleAttrValues" v-model="form.attrValues" >
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="状态"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="status"
      >
        <a-select placeholder="请选择状态" style="width: 100%" allow-clear v-model="form.status">
          <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
    <div class="bottom-control">
      <a-space>
        <a-button type="primary" @click="submitForm">
          保存
        </a-button>
        <a-button type="dashed" @click="cancel">
          取消
        </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>
<script>
import { getAttr, saveAttr, updateAttr } from '@/api/wms/base/attr'
import CategorySelect from '@/components/wms/categorySelect.vue'
import createForm from '@/views/wms/base/category/modules/createForm.vue'

export default {
  components: {
    createForm,
    CategorySelect
  },
  props: {},
  data () {
    return {
      open: false,
      // 状态
      statusOptions: [],
      form: {
        attrName: undefined,
        categoryId: undefined,
        categoryFullName: undefined,
        status: undefined,
        attrValues: []
      },
      rules: {
        attrName: [{ required: true, message: '属性名称不能为空', trigger: 'blur' }],
        categoryId: [{ required: true, message: '所属分类不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
        attrValues: [{ required: true, message: '属性值不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {},
  computed: {},
  methods: {
    rest () {
      this.form = {
        attrName: undefined,
        categoryId: undefined,
        categoryCode: undefined,
        categoryName: undefined,
        categoryFullName: undefined,
        status: undefined
      }
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    showForm (id) {
      this.open = true
      this.rest()
      if (id) {
        getAttr(id).then(res => {
          if (res.code === 200) {
            this.form = res.data
          }
        })
      }
    },
    onClose () {
      this.open = false
    },
    submitForm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.attrId) {
            updateAttr(this.form).then(res => {
              if (res.code === 200) {
                this.$message.success(
                  '修改成功',
                  3
                )
                this.open = false
                this.$emit('ok')
              }
            })
          } else {
            saveAttr(this.form).then(res => {
              if (res.code === 200) {
                this.$message.success(
                  '添加成功',
                  3
                )
                this.open = false
                this.$emit('ok')
              }
            })
          }
        }
      })
    },
    // 选择分类
    getCategoryData (data) {
      this.form.categoryId = data.categoryId
      this.form.categoryCode = data.categoryCode
      this.form.categoryName = data.categoryName
      this.form.categoryFullName = data.categoryFullName
    },
    handleAttrValues (value) {
      this.form.attrValues = value
    }
  },
  created () {
    this.rest()
    this.getDicts('status').then(response => {
      this.statusOptions = response.data
    })
  },
  mounted () {
  }
}
</script>,
